import React from 'react';
import './index.scss';
import PageTile from 'component/page-title/index.jsx';
import {Link ,NavLink } from 'react-router-dom';
import homeService from  'service/home-service.jsx';
const _home = new homeService();

class Home extends React.Component{
  constructor(props){
    super(props);
    this.state={
      userCount: '-',
      productCount: '-',
      orderCount: '-'
    };
    this.getCount = this.getCount.bind(this);
  }
  componentDidMount(){
    this.getCount();
  }
  //获取统计数据
  getCount(){
    _home.getCountAll().then(res => {
       this.setState(res);
     },errMsg => {
         _req.errorTips(errMsg);
     });
  }
  render(){
    return(
       <div id="page-wrapper">
         <PageTile title='首页'/>
         <div className="row">
           <div className="col-md-4">
                <Link to='/user' className="color-box green">
                  <p className="count">{this.state.userCount}</p>
                  <p className="desc">
                    <i className="fa fa-user-circle-o"></i>
                    <span>用户总数</span>
                  </p>
                </Link>
            </div>
            <div className="col-md-4">
                <Link to='/product'  className="color-box blue">
                 <p className="count">{this.state.productCount}</p>
                 <p className="desc">
                   <i className="fa fa-shopping-bag"></i>
                   <span>商品总数</span>
                 </p>
                </Link>
            </div>
            <div className="col-md-4">
                <Link to='/orders'  className="color-box red">
                  <p className="count">{this.state.orderCount}</p>
                  <p className="desc">
                    <i className="fa fa-sitemap"></i>
                    <span>订单总数</span>
                  </p>
                </Link>
            </div>
         </div>
       </div>
    );
  }
}
export default Home;